<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .w {
      margin: 0 auto;
    }

    .triangle {
      position: relative;
      width: 200px;
      height: 24px;
      border: 1px solid black;
    }

    .triangle::after {
      position: absolute;
      top: 6px;
      right: 7px;
      content: "";
      width: 10px;
      height: 10px;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      transform: rotate(45deg);
      transition: all .2s;
    }

    .triangle:hover::after {
      transform: rotate(225deg);
    }

    /*  先hover伪类 然后after伪元素  */

    .irregular-circle {
      margin: 20px auto;
      width: 150px;
      height: 150px;
      background: linear-gradient(45deg, #26D0CE, #1A2980);
      border-radius: 30% 70% 67% 33% / 30% 30% 70% 70%
        /* 设置不同方向的边框半径 */
    }

    .roate_scale {
      position: absolute;
      top: 50%;
      left: 50%;
      
      width: 50px;
      height: 50px;
      background-color: pink;
      transition: transform .5s;
      transform-origin: -10px -10px;
    }

    .roate_scale:hover {
      transform: rotate(.5turn)
    }

    

    .grid-container {
      position: relative;
      width: 500px;
      /* 容器宽度 */
      height: 500px;
      /* 容器高度 */
      background-image:
        linear-gradient(to right, #4b6f925e 1px, transparent 1px),
        /* 垂直线 */
        linear-gradient(to bottom,#4b6f925e 1px, transparent 1px);
      /* 水平线 */
      background-size: 10px 10px;
      /* 网格线间距 */
      background-color:#D1E1E8;
      /* 背景颜色 */
    }
  </style>
</head>

<body>
  <div class="triangle w">css旋转实现三角形</div>

  <div class="irregular-circle w"></div>

  <div class="grid-container w">
    <div class="roate_scale"></div>
  </div>




</body>

</html>